<template>
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        
        <a-form-item
          label="设置业务员佣金比例"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
          >
          <a-input
            :maxLength="6"
            suffix="%"
            v-decorator="[
              'commission',
              {rules: [{ required: true, message: '请输入业务员的佣金比例' }]}
            ]"
            placeholder="请输入业务员的佣金比例"/>
        </a-form-item>

        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary">提交</a-button>
        </a-form-item> 
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import pick from 'lodash.pick'
import { ConfigSetting, ConfigItem } from '../../../api/setsystem'
// import Editor from '@/components/Editor/QuillEditor'

const fields = ['commission']
export default {    
  name: 'system',
  components: {
  },
  data () {
    return {
      // 获取接口数据
      InitialValue: '',
      // 富文本
      contract: '',
      loading: false,
      copyright: '',
      // 二维码
       headers: {
        authorization: 'authorization-text',
      },
      // 富文本
      editorText: '',
      form: this.$form.createForm(this),
    }
  },
  created () {
    this.getMasterInfo()
  },
  methods: {
    getMasterInfo() {
      ConfigItem().then(res => {
          this.InitialValue = res.data.value
          this.form.setFieldsValue(pick(this.InitialValue, fields))
      })
    },
    getEditorText(value) {
      this.copyright = value
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("values",values)
          const requestParameters = Object.assign({}, this.InitialValue,values)
          ConfigSetting(requestParameters).then(res => {
            this.$message.success('保存成功')
            // this.form.resetFields()
            // location.reload();
          })
        }
      })
    }
  }
}
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.avatar-uploader > .ant-upload {
  width: 102px;
  height: 102px;
}
.avatar-uploader img {
  width: 102px;
  height: 102px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
